﻿<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
	<!-- Basic Page Needs
================================================== -->
	<title>蒋亚辉</title>
	<link href="images/logo_ico.ico" rel="shortcut icon" />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="个人简介">
	<meta name="author" content="蒋亚辉">
	<meta name="keywords" content="蒋亚辉,jarvan,jiangyahui,Jarvan">

	<!-- Mobile Specific Metas 
================================================== -->
	<meta content="width=device-width,initial-scale=1" name="viewport">

	<!-- Favicons
================================================== -->
	<link rel="shortcut icon" href="images/favicon.png">
	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

	<!--fonts
====================================================-->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700%7cOswald:400,700" rel="stylesheet">
	<!--stylesheets
====================================================-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/simpletextrotator.css">
	<style>
		.bottom-el {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 40px;
			background-color: #000000;
		}
		.bottom-el a {
			color: #ffffff;
			text-decoration: none;
		}
		.bottom-el a:active {
			color: #ffffff;
			text-decoration: none;
		}
	</style>

	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
	<script src="js/jquery.min.js"></script> <!-- JQUERY -->
</head>

<body>

	<!--FRONT PAGE/ SPLASH SCREEN SECTION-->

	<div class="loading-screen"></div>

	<div id="frontpage">
		<div class="shadow-img"></div>
		<img src="images/front-image.jpg" class="front-img img-responsive" alt="Front-image">
		<!--IMAGE FOR FRONT SCREEN-->
		<h1>Jarvan <span class="invert">Hui</span></h1>
		<!--PROFILE NAME-->
		<h3 class="invert" style="margin-top: -10px; margin-bottom: 10px;">Web <span class="rotate">前端工程师, 移动端开发, 微信小程序</span></h3>
		<!--SUBTITLE IN PROFILE-->
		<div class="frontclick"><img src="images/click.png" alt="" class="img-responsive"><span class="pulse"></span></div>
	</div>
	<!--FRONT PAGE/ SPLASH SCREEN SECTION ENDS-->
	<!--container-->
	<div class="container">
		<div id="content" class="row hidden">
			<div class="col-sm-4">
				<!--namecard-->
				<div id="namecard" class="namecard">
					<div class="shadow-img"></div>
					<h1 class="maintitle">Jarvan <span class="invert">Hui</span></h1>
					<!--PROFILE NAME-->
					<h3 class="invert sub-maintitle">Web
						<span class="rotate">前端工程师, 移动端开发, 微信小程序</span>
						<!--SUBTITLE AFTET NAME-->
					</h3>
					<img id="profile-img" class="profile-img transparent" src="images/profile-thum.png" alt="profile-image">
					<!--PROFILE IMAGE-->
				</div>
				<!--/#namecard-->
				<!--menu-->
				<div id="menu-container">
					<!--PAGE MENU-->
					<ul class="nav-menu no-padding">
						<li class="nav-btn selected" title="Home" data-page="home">
							<div class="hover-background"></div>
							<span>主页</span><i class="fa fa-user fa-fw"></i>
						</li>
						<li class="nav-btn" id="resume-btn" title="Resume" data-page="resume">
							<div class="hover-background"></div>
							<span>简历</span><i class="fa fa-file-text fa-fw"></i>
						</li>
						<li class="nav-btn folio-btn" data-filter="*" title="Portfolio" data-page="portfolio">
							<div class="hover-background"></div>
							<span>作品</span><i class="fa fa-suitcase fa-fw"></i>
						</li>
						<li class="nav-btn" title="Contact" id="contact-link" data-page="contact">
							<div class="hover-background"></div>
							<span>联系</span><i class="fa fa-paper-plane fa-fw"></i>
						</li>
					</ul>
					<!--/.nav-menu __PAGE MENU ENDS-->

					<!--SOCIAL NAV MENU-->
					<div class="social-menu-container">
						<ul class="social-menu no-padding">
							<li><a target="_blank" href="https://www.facebook.com/jarvan.chiang.1"><i class="fa fa-facebook"></i></a></li>
							<li><a target="_blank" href="https://twitter.com/Jarvannnnnn"><i class="fa fa-twitter"></i></a></li>
							<li><a target="_blank" href="https://www.google.com/"><i class="fa fa-google-plus"></i></a></li>
							<li><a target="_blank" href="https://www.youtube.com/channel/UCx2cBb4JgnnDjEHfkkzGgew"><i class="fa fa-youtube"></i></a></li>
							<li><a target="_blank" href="https://www.google.com/"><i class="fa fa-linkedin"></i></a></li>
						</ul>
					</div>
					<!--/.social-menu-container-->
				</div>
				<!--#menu-container-->
			</div>
			<div class="col-sm-8 page-segment">
				<ul class="page-container no-padding">
					<!--HOME/PROFILE PAGE-->
					<li id="home" class="selected">
						<div class="title-container hidden">
							<div class="shadow-img"></div>
							<h2 class="rotate-out">欢迎来到 <span class="invert">我的主页</span></h2>
							<!--HOME TITLE-->
						</div>
						<div class="description hidden">
							<div class="watermark-home"></div>

							<div class="fade-text transparent">
								<!--DESCRIPTION ON HOME-->
								<div class="strong-text">Hello， 我是 <span>蒋亚辉</span></div>
								<div class="focus-text"><span>Web 前端工程师 & </span><span>Web 移动端开发</span></div>
								<p class="large-paragraph">有良好的团队协作能力，也可单独完成需要的项目、做事认真、适应环境快、责任心强，对编程有很大兴趣，平时常去阮一峰、张鑫旭等大牛博客，也常去CSDN、博客园、GitHub、简书等国内外技术社区查阅问题，学习一些新的特性，本人性格活泼开朗，也喜欢新事物，喜欢打篮球，爱好旅游、摄影等</p>
								<!--DESCRIPTION ON HOME ENDS-->
							</div>

							<!--ALL PERSONAL DETAILS-->
							<h3 class="personal-info-title title">个人信息</h3>
							<ul class="personal-info">
								<li class="rotate-out rotated"><label>姓名</label><span>蒋亚辉</span></li>
								<li class="rotate-out rotated"><label>地址</label><span>浙江杭州</span></li>
								<li class="rotate-out rotated"><label>Email</label><span>j532547613@gmail.com</span></li>
								<li class="rotate-out rotated"><label>电话</label><span>18638786538</span></li>
							</ul>
							<!--/ul.personal-info-->
						</div>
					</li>
					<!--/#home-->

					<!--RESUME PAGE-->
					<li id="resume" class="hidden">
						<div class="title-container">
							<div class="shadow-img"></div>
							<h2 class="rotate-out rotated"><span class="invert">我的 </span> 简历</h2>
							<!--RESUME TITLE-->
						</div>
						<div class="description">

							<div class='tabs tabs_animate'>
								<!--RESUME TAB LISTS-->
								<ul class='horizontal no-padding'>
									<li><a href="#tab-1" class="icon-bg icon-skills">
											<div>技能</div>
										</a></li>
									<li><a href="#tab-2" class="icon-bg icon-education">
											<div>学习</div>
										</a></li>
									<li><a href="#tab-3" class="icon-bg icon-employment">
											<div>经历</div>
										</a></li>
								</ul>
								<!--RESUME TAB LISTS ENDS-->

								<!--RESUME FIRST TAB/SKILL TAB DETAILS-->
								<div id='tab-1'>
									<h3 class="title">专业技能</h3>
									<!--SKILLS WITH BAR DISPLAY-->
									<ul class="skills-list no-padding">
										<li class="row">
											<div class="col-xs-2">
												<div class="fw-mid">JavaScript</div>
											</div>
											<div class="col-xs-9">
												<div class="bar">
													<div class="percentage" id="bar1" style="width: 85%;"></div>
												</div>
											</div>
										</li>
										<li class="row">
											<div class="col-xs-2">
												<div class="fw-mid">Angular2</div>
											</div>
											<div class="col-xs-9">
												<div class="bar">
													<div class="percentage" id="bar2" style="width: 75%;"></div>
												</div>
											</div>
										</li>
										<li class="row">
											<div class="col-xs-2">
												<div class="fw-mid">Vue</div>
											</div>
											<div class="col-xs-9">
												<div class="bar">
													<div class="percentage" id="bar3" style="width: 58%;"></div>
												</div>
											</div>
										</li>
									</ul>
									<!--SKILLS WITH BAR DISPLAY ENDS-->

									<!--SKILLS WITH CIRCLE DISPLAY-->
									<div class="circle-skill-container">
										<h3 class="title">其他技能</h3>
										<div class="row">
											<div class="col-xs-4 center-align">
												<div class="circle-bar" id="line-container1">
													<div class="progressbar-text" id="progress-text1">0</div>
												</div>
												<h5>Hybird</h5>
											</div>
											<div class="col-xs-4 center-align">
												<div class="circle-bar" id="line-container2">
													<div class="progressbar-text" id="progress-text2">0</div>
												</div>
												<h5>Ionic2</h5>
											</div>
											<div class="col-xs-4 center-align">
												<div class="circle-bar" id="line-container3">
													<div class="progressbar-text" id="progress-text3">0</div>
												</div>
												<h5>小程序</h5>
											</div>
										</div>
									</div>
									<!--SKILLS WITH CIRCLE DISPLAY ENDS-->
								</div>
								<!--RESUME FIRST TAB/SKILL TAB DETAILS ENDS-->
								<div id='tab-2'>
									<h3 class="title">学习经历</h3>
									<ul class="education-class">
										<li>
											<!--EDUCATION LIST ITEM-->
											<h4 class="title">河南农业大学<i class="fa fa-sort-desc pull-right"></i></h4>
											<div class="list-content">
												<h5 class="title">计算机多媒体<span class="list-year">(2013 - 2016)</span></h5>
												<p>1</p>
												<!--EDUCATION LIST DETAILS-->
											</div>
										</li>
									</ul>
								</div>
								<!--RESUME SECOND TAB/EDUCATION TAB DETAILS ENDS-->
								<!--RESUME SECOND TAB/EDUCATION TAB DETAILS-->


								<div id='tab-3'>
									<h3 class="title">工作经历</h3>
									<ul class="employment-class tab-cont">
										<li>
											<h4>杭州霖扬信息科技有限公司 <span class="year">2018.10 - </span></h4>
											<h5>web前端工程师</h5>
											<p>工作经验</p>
											<p>1.负责h5 webview的页面开发</p>
											<p>2.负责小程序的版本迭代开发</p>
										</li>
										<li>
											<h4>河南青云信息技术有限公司 <span class="year">2016.12 - 2018.10</span></h4>
											<h5>web前端工程师</h5>
											<p>工作经验</p>
											<p>1.负责Hybird App项目开发</p>
											<p>2.负责微信公众号、小程序前端开发</p>
											<p>3.负责与客户对接，调控项目进度</p>
										</li>
									</ul>
								</div>
								<!--RESUME THIRD TAB/EMPLYMENT TAB DETAILS ENDS-->
							</div>
						</div>
					</li>
					<!--/#resume-->
					<!--PORTFOLIO PAGE-->
					<li id="portfolio" class="hidden">
						<div class="title-container">
							<div class="shadow-img"></div>
							<h2 class="rotate-out rotated">个人作品</h2>
							<!--PORTFOLIO TITLE-->
						</div>

						<!--PORTFOLIO CATEGORY LIST-->
						<div class="abs-child">
							<ul class="button-group filters-button-group">
								<li class="button is-checked" data-filter="*">全部</li>
								<li class="button" data-filter=".photography">小程序</li>
								<li class="button" data-filter=".commercial">DEMO</li>
								<li class="button" data-filter=".potrait">其他</li>
							</ul>
							<!--/.button-group filters-button-group-->
						</div>

						<div class="sec-porfolio description">
							<div class="row">
								<!--PORTFOLIO ITEM CONTAINER-->
								<div class="folio-container">
									<ul class="folio-item">
										<!--PORTFOLIO INDIVIDAUAL ITEM-->
										<li class="view view-second photography">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/project/inyou.png" alt="guy" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask"></div>
											<div class="content">
												<h2>in有尽有</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal7">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-first potrait">
											<img src="images/folio/snake.png" alt="logs" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask">
												<h2>贪吃蛇</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<!-- Button trigger modal -->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-second commercial">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/folio/book.jpg" alt="book" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask"></div>
											<div class="content">
												<h2>随机密码生成器</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal2">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-tenth photography">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/project/7cj.png" alt="beach" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask">
												<h2>7财经</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal6">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-second commercial">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/folio/mofan.jpg" alt="guy" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask"></div>
											<div class="content">
												<h2 style="width: 6em">莫凡<br>文化传媒</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal3">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>

										<li class="view view-second commercial">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/project/gdm.png" alt="guy" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask"></div>
											<div class="content">
												<h2>阁德美</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal9">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-second commercial">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/project/czl.png" alt="guy" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask"></div>
											<div class="content">
												<h2>车助理</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal10">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-second commercial">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/project/hzh.png" alt="guy" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask"></div>
											<div class="content">
												<h2>货主汇</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal11">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-first potrait">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/folio/illustration.jpg" alt="illustration" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask">
												<h2>多拿点</h2>
												<a role="button" class="info" data-toggle="modal" data-target="#myModal4">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-tenth potrait">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/folio/logs.jpg" alt="logs" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask">
												<h2>DSGS</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal8">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-tenth photography">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/project/51cnews.png" alt="beach" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask">
												<h2>51Cnews</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal6">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
										<li class="view view-tenth commercial">
											<!--PORTFOLIO INDIVIDAUAL ITEM-->
											<img src="images/folio/douban.png" alt="beach" />
											<!--PORTFOLIO INDIVIDAUAL ITEM IMAGE-->
											<div class="mask">
												<h2>豆瓣</h2>
												<!--PORTFOLIO INDIVIDAUAL ITEM TITLE-->
												<a role="button" class="info" data-toggle="modal" data-target="#myModal5">Read More</a>
												<!--PORTFOLIO INDIVIDAUAL ITEM MODAL LINK BY 'data-target'-->
											</div>
										</li>
									</ul>
								</div>
								<!--PORTFOLIO ITEM CONTAINER ENDS-->
							</div>
						</div>
					</li>
					<!--/#portfolio-->

					<!--CONTACT PAGE-->
					<li id="contact" class="hidden">
						<div class="title-container">
							<div class="shadow-img"></div>
							<h2 class="rotate-out rotated">联系我</h2>
							<!--CONTACT PAGE TITLE-->
						</div>
						<div class="description">
							<div class="row">
								<div class="col-sm-12">
									<div id="mapBox" style="width:528px;height:325px;position: absolute;z-index: 2"></div>
								</div>
								<div class="col-sm-0">
									<div class="map-container">
										<div id="map" style="width:100%;height:325px;display: none"></div>
										<!--GOOGLE MAP-->
									</div>
								</div>

								<div class="col-sm-5">
									<!--CONTACT DESCRIPTION-->
									<h3 class="title">联系信息</h3>
									<h6 class="sm-title"><span class="address-icon"><i class="fa fa-map-marker"></i></span>浙江杭州</h6>
									<h6 class="sm-title"><span class="address-icon"><i class="fa fa-phone"></i></span>18638786538</h6>
									<h6 class="sm-title"><span class="address-icon"><i class="fa fa-envelope"></i></span>j532547613@gamil.com</h6>
									<!--/CONTACT DESCRIPTION ENDS-->
								</div>
								<div class="col-sm-7">

									<div class="mail-container" style="left: 40px;z-index: 3;">
										<div class="cnmail result">
											<div class="msg success-msg"><i class="icon svg-check">
													<!--?xml version="1.0" encoding="utf-8"?--> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
													 xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
														<path d="M16 2.688c-7.375 0-13.313 5.938-13.313 13.313s5.938 13.313 13.313 13.313c7.375 0 13.313-5.938 13.313-13.313s-5.938-13.313-13.313-13.313zM16 28.25c-6.75 0-12.25-5.5-12.25-12.25s5.5-12.25 12.25-12.25c6.75 0 12.25 5.5 12.25 12.25s-5.5 12.25-12.25 12.25zM22.688 11.25l-8.563 8.313-3-3c-0.313-0.313-0.813-0.313-1.125 0s-0.313 0.813 0 1.125l3.563 3.563c0.125 0.125 0.313 0.188 0.563 0.188 0.188 0 0.375-0.063 0.5-0.188l9.125-8.875c0.375-0.313 0.375-0.813 0.063-1.125s-0.813-0.313-1.125 0z"></path>
													</svg> </i><span> You email has been stored!</span></div>
											<div class="msg error-msg"><i class="icon svg-close-circle">
													<!--?xml version="1.0" encoding="utf-8"?--> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
													 xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
														<path d="M6.563 6.563c-5.188 5.188-5.188 13.688 0 18.875s13.688 5.188 18.875 0c5.188-5.188 5.188-13.625 0-18.875-5.188-5.188-13.625-5.188-18.875 0zM24.688 24.688c-4.813 4.75-12.563 4.75-17.375 0-4.75-4.813-4.75-12.563 0-17.375 4.813-4.75 12.563-4.75 17.375 0 4.75 4.813 4.75 12.563 0 17.375zM10.75 10l-0.813 0.75 5.313 5.25-5.25 5.25 0.75 0.75 5.25-5.25 5.25 5.25 0.75-0.75-5.25-5.25 5.313-5.25-0.813-0.75-5.25 5.25z"></path>
													</svg> </i><span>请填写完整信息!</span></div>
										</div>
										<h3 class="title invert">联系我</h3>
										<!--CONTACT FORM-->
										<form action="/jarvan/php/sendmail.php" method="post" class="form-horizontal" id="contact-form">
											<div class="form-group">
												<input name="name" class="form-control required" placeholder="Name" data-placement="top" type="text">
											</div>
											<div class="form-group">
												<input name="email" class="form-control email" placeholder="Email" type="text">
											</div>
											<div class="form-group">
												<textarea name="message" class="form-control" placeholder="Message" rows="3"></textarea>
											</div>
											<div class="form-group">
												<button type="submit" name="submit" class="btn btn-success">SEND</button>
											</div>

										</form>
										<!--/#contact-form-->
									</div>

								</div>

							</div>
						</div>
					</li>
					<!--/#contact-->
				</ul>

				<div class="row mobile-nav-container">
					<!--SOCIAL NAV FOR MOBILE-->
					<ul class="mobile-social no-padding">
						<li>Connect With Me</li>
						<li><a href="https://www.facebook.com/jarvan.chiang.1"><i class="fa fa-facebook"></i></a></li>
						<li><a href="https://twitter.com/Jarvannnnnn"><i class="fa fa-twitter"></i></a></li>
						<li><a href="https://www.youtube.com/channel/UCx2cBb4JgnnDjEHfkkzGgew"><i class="fa fa-youtube"></i></a></li>
						<li><a href="https://www.google.com/"><i class="fa fa-google"></i></a></li>
						<li><a href="https://www.google.com/"><i class="fa fa-linkedin"></i></a></li>
					</ul>
					<!--/.mobile-social-->
				</div>
			</div>
			<!--/.page-segment -->
			<!--  <h6 class="copyright-text">Copyright © 2015 Jarvan Hui</h6> -->
			<!--if anyone wants copyright Texts-->
		</div>
	</div>
	<!--/.container -->

	<!--PORTFOLIO IMAGE MODAL LIST-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">贪吃蛇</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="./webDemo/snake.html"><img src="images/folio/snake.png" class="img-responsive" alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>贪吃蛇小游戏 PC端通过小键盘"↑ ↓ ← →" 来控制蛇的移动 移动端通过滑动控制方向</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel2">js随机密码生成器</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="./webDemo/demo-password/demo-password.html"><img src="images/folio/book.jpg" class="img-responsive"
						 alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>js随机密码生成器</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel3">莫凡文化传媒 &nbsp;&nbsp;&nbsp;&nbsp;门户展示</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="webDemo/mofan/04-莫凡文化传媒.html"><img src="images/folio/mofan_logo.jpg" class="img-responsive"
						 alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>莫凡文化传媒门户网站 ————静态页面展示</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div class="modal fade" id="myModal9" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel3">阁德美</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="https://itunes.apple.com/cn/app/%E9%98%81%E5%BE%B7%E7%BE%8E%E9%99%88%E8%AE%BE/id1392817816?mt=8"><img src="images/project/gdm.png" class="img-responsive"
						 alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>在阁德美，通过我们的互联网平台轻松的拥有你所爱的陈设艺术品，我们帮助你们找到你们所爱的艺术，通过完美的陈设设计，让你们爱上你们的空间，这就是我们的愿景！</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal10" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel3">车助理</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="https://itunes.apple.com/cn/app/%E5%AE%85%E5%AE%B6%E8%BD%A6%E5%8A%A9%E7%90%86/id1305855822?mt=8"><img src="images/project/czl.png" class="img-responsive"
							alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>宅家车助理</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel3">货主汇</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="https://sj.qq.com/myapp/detail.htm?apkName=com.zaq.huozhuhui"><img src="images/project/hzh.png" class="img-responsive"
							alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>《货主汇》定位于公路干线整车物流O2O平台，能够减少业内普遍通过信息部来承揽货源、寻找车辆、多次转手交易等弊端，能够全面解决一般纳税人的“车、货、票”匹配难题，有效消除货主方和承运方的涉税风险。公司通过智能算法等物流行业综合解决方案，能够让货主少掏钱，司机多挣钱。</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
		
	<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel4">多拿点</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_black" href="http://www.jiangyh.cn:3001"><img src="images/folio/illustration.jpg" class="img-responsive" alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>多拿点官网</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel5">豆瓣电影&豆瓣音乐</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="webDemo/douban/douban.html"><img src="images/folio/movie.jpg" class="img-responsive" alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>练习模拟豆瓣网站制作 包含豆瓣电影、豆瓣音乐、登录、注册页面</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel6">saasfsa</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="#"><img src="images/folio/book.jpg" class="img-responsive" alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sapiente, odit, illo saepe voluptate eos enim
							eius autem cumque ab, soluta dolor tempore inventore eligendi maxime voluptas pariatur explicabo blanditiis?</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel7">in有尽有</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<img src="images/folio/book.jpg" class="img-responsive" alt="modal-image">
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>in有，国内新娱乐社交电商平台，汇聚大牌产品、潮流新品、应有尽有，上in有就购了，让分享更有价值，让生活更加精彩！</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel8">KJHDSFKJHASFLKH</h4>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<a target="_blank" href="#"><img src="images/folio/book.jpg" class="img-responsive" alt="modal-image"></a>
					<!--PORTFOLIO MODAL IMAGE-->
				</div>
				<div class="modal-footer">
					<div class="mf-content">
						<p>alkghoiradasfpoijepodsafojsapodf</p>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div class="modal fade" id="subscribe_modal_1" tabindex="-1" role="dialog" aria-labelledby="subscribe_modal_1"
	 aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h2 class="modal-title">Thank You</h2>
					<!--PORTFOLIO IMAGE TITLE-->
				</div>
				<div class="modal-body">
					<div class="text-center mail-sucsess">
						<h3> <span>your mail has been sent</span></h3>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<div class="bottom-el">
		<a target="_blank" href="http://www.beian.miit.gov.cn">
			豫ICP备17008493号
		</a>
	</div>
</body>

</html>
<!--javascript files
=============================================================-->
<script type="text/javascript" src="js/jQueryTween-aio-min.js"></script> <!-- JQUERY Tween Plugin -->
<script type="text/javascript" src="js/jquery.tabslet.min.js"></script> <!-- JQUERY Tab plugin-->
<script type="text/javascript" src="js/progressbar.min.js"></script> <!-- JQUERY Progressbar Plugin-->
<script type="text/javascript" src="js/jquery.simple-text-rotator.min.js"></script> <!-- JQUERY Text Rotator-->
<script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- Bootstrap file-->
<script src="http://ditu.google.cn/maps/api/js?key="></script>
<script type="text/javascript" src='js/isotope.pkgd.min.js'></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript">
	const lat = 30.2180041795;
	const long = 120.2127005871;
	//创建和初始化地图函数：
	function initMap() {
		createMap();//创建地图
		setMapEvent();//设置地图事件
	}

	//创建地图函数：
	function createMap() {
		var map = new BMap.Map("mapBox");//在百度地图容器中创建一个地图
		var point = new BMap.Point(long, lat);//定义一个中心点坐标
		var point2 = new BMap.Point(120.21, 30.2180);//定义一个中心点坐标
		map.centerAndZoom(point, 18);//设定地图的中心点和坐标并将地图显示在地图容器中
		var marker = new BMap.Marker(point2);
		map.addOverlay(marker);
		window.map = map;//将map变量存储在全局
	}

	//地图事件设置函数：
	function setMapEvent() {
		map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		map.enableKeyboard();//启用键盘上下左右键移动地图
	}

	window.onload = initMap;//创建和初始化地图
</script>
<script>
	var _hmt = _hmt || [];
	!function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?ec5e64f39cb8ff88b158424c0cb9d385";
		var s = document.getElementsByTagName("script")[0]; 
		s.parentNode.insertBefore(hm, s);
	}();
</script>
	